<template>
  <div class="bg">
    <div ref="lineChartData" class="line"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

export default {
  name: "LineChartData",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
  },
  components: {

  },
  data() {
    return {
      valueList: [],
      xAxisList: [],
      option: {
        // color: "white",
        title: {
          text: '月交易次数',
          left: 5,
          top: 10,
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        label: {
          show: true,
          color: 'white',
          fontStyle: 'normal',
          fontSize: 14
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false, // 去除轴间距
          // 去除刻度线
          axisTick: {
            // show: false
          },
          axisLine: {
            show: false // 去除轴线
          },
          axisLabel: {
            color: "white",
            fontSize: 13,
            formatter: function (value) {
              var strList = value.split("-")
              return strList[1]  + "月"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: "white",
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          },
          axisLabel: {
            color: "white",
            // fontSize: 14,
          }
        },
        animation: false,
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            label: {
              show: true
            },
          }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    dataList(val) {
      this.$nextTick(() => {
        this.init()
      })
    }
  },
  methods: {
    init() {
      this.handleList()
      this.option.series[0].data = this.valueList
      this.option.xAxis.data = this.xAxisList
      
      var chartDom = this.$refs.lineChartData;
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option)
    },
    handleList() {
      if (this.dataList && this.dataList.length > 0) {
        this.valueList = []
        this.xAxisList = []
        this.dataList.forEach((item) => {
          this.valueList.push(item.num)
          this.xAxisList.push(item.date)
        })
      }
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .bg {
    position: relative;
    width: 100%;
    height: 300px !important;
  }
  .line {
    position: relative;
    margin-left: 10px;
    width: 100%;
    height: 100%;
  }
</style>